<template>
  <el-card class="content" shadow="never">
    <template v-slot:header>
      <el-form>
        <el-form-item label="选择年份：" class="ele-form-search" style="margin-bottom: 0">
          <el-date-picker
            v-model="date"
            :clearable="false"
            type="year"
            placeholder="选择年份"
            style="width: 300px"
            @change="queryData"
            value-format="yyyy"
            :picker-options="{
                disabledDate: (time) => {
                    return time.getTime() >= Date.now()
                }
              }"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </template>

    <template >
      <el-row v-loading="loading" :gutter="20">
        <el-col :span="12">
          <div class="echarts">
            <Echarts1 :date="date" ref="Echarts1Ref"/>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="echarts">
            <Echarts2 :date="date" ref="Echarts2Ref"/>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <div class="echarts">
          <Echarts3 :date="date" ref="Echarts3Ref"/>
        </div>
      </el-row>
    </template>
  </el-card>
</template>

<script>
import Echarts1 from "@/views/project/project/components/Echarts1.vue";
import Echarts2 from "@/views/project/project/components/Echarts2.vue";
import Echarts3 from "@/views/project/project/components/Echarts3.vue";

export default {
  name: "overview",

  components: {
    Echarts1,
    Echarts2,
    Echarts3
  },
  data() {
    const date = new Date().getFullYear().toString()
    return {
      date,
      loading: false
    }
  },
  mounted() {
    this.queryData()
  },
  methods: {
    async queryData(year) {
      this.loading = true
      const res = (await this.$http.get(`/reports/task_review`, {params: {year}})).data
      res.success ? (() => {
          this.$refs.Echarts1Ref.setEChartsOptions(res.data.status_proportion)
          this.$refs.Echarts2Ref.setEChartsOptions(res.data.schedule_proportion)
          this.$refs.Echarts3Ref.setEChartsOptions(res.data.statistics)
        })()
        :
        this.$message.error(res.msg);
      this.loading = false
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  .echarts {
    height: 500px;
  }
}

::v-deep .el-card__header {
  padding-left: 0;
}
</style>
